<template>
  <div class="page" @mousemove="sliderMove">
    <div class="ver-box">
      <div class="ver-box-imgs">
        <div class="ver-box-imgs-bg">
          <img id="scream" :src="verimg" />
          <canvas id="puzzleBox" :width="w" :height="h"></canvas>
        </div>
        <div class="puzzle-lost-box" ref="puzzleBox">
          <canvas id="puzzleShadow" :width="w" :height="h"></canvas>
          <canvas id="puzzleLost" :width="w" :height="h"></canvas>
        </div>
        <p class="ver-tips">
          <i style="background-position: -4px -1207px"></i
          ><span style="color: #42ca6b">验证通过</span><span></span>

          <!-- <i style="background-position: -4px -1229px"></i
          ><span style="color: red">验证失败:</span
          ><span style="margin-left: 4px">拖动滑块将悬浮图像正确拼合</span> -->
        </p>
      </div>
      <div class="re-btn"><a></a></div>
    </div>
    <br />
    <div class="slider-box">
      <div class="slider-box-c">
        <p class="slider-box-c-t">按住左边滑块，拖动完成上方拼图</p>
      </div>
      <div
        class="slider-btn"
        @mousedown="sliderBtnDown"
        @mouseup="sliderBtnUp"
      ></div>
    </div>
  </div>
</template>

<script>
import verimg from "@/assets/verify/ver.png";
export default {
  data() {
    return {
      verimg,
      X: 0,
      Y: 0,
      // 定义一个鼠标按下的X轴值
      moveStart: 0,
    };
  },
  props: {
    w: {
      type: Number,
      default: 370,
    },
    h: {
      type: Number,
      default: 195,
    },
  },
  computed: {
    // 设置拼图缺失坐标取值范围
    PL_Size() {
      //**缺失拼图的大小
      return 48;
    },
    padding() {
      //缺失拼图与边框的距离
      return 20;
    },
    MinN_X() {
      return this.padding + this.PL_Size;
    },
    MaxN_X() {
      return this.w - this.padding - this.PL_Size - this.PL_Size / 6;
    },
    MaxN_Y() {
      return this.padding;
    },
    MinN_Y() {
      return this.h - this.padding - this.PL_Size - this.PL_Size / 6;
    },
    // 拼图初始化存在的left位置
    left_Num() {
      return -this.X + 10;
    },
  },
  created() {
    //生成缺失拼图的随机坐标 X,Y
    this.X = this.RandomNum(this.MinN_X, this.MaxN_X);
    this.Y = this.RandomNum(this.MinN_Y, this.MaxN_Y);
  },
  mounted() {
    this.initStyle();
    this.drowImgVer();
  },
  methods: {
    sliderBtnDown(e) {
      //* 鼠标按下 / 手指按下
      e = e || window.event;
      // 鼠标在滑块按下切换滑块背景
      e.target.style.backgroundPosition = "0 -216px";
      // 记录鼠标按下时的坐标 X轴值
      this.moveStart = e.pageX || e.originalEvent.targetTouches[0].pageX;
    },
    sliderMove(e) {
      e = e || window.event;
      var moveX = e.pageX || e.originalEvent.targetTouches[0].pageX; //监听鼠标的位置
      var d = moveX - this.moveStart; //鼠标按住后在X轴上移动的距离
      if (this.moveStart == 0) {
        // console.log('未拖动滑块');
      } else {
        if (d < 0 || d > this.w - this.padding - this.PL_Size) {
          // console.log('超过范围');
        } else {
          document.querySelector(".slider-btn").style.left = d + "px";
          document.querySelector(".slider-btn").style.transition = "inherit";

          document.querySelector("#puzzleLost").style.left = d + "px";
          document.querySelector("#puzzleLost").style.transition = "inherit";

          document.querySelector("#puzzleShadow").style.left = d + "px";
          document.querySelector("#puzzleShadow").style.transition = "inherit";
        }
      }
    },
    sliderBtnUp(e) {
      e = e || window.event;
    //   var e_pageX =
    //     e.originalEvent.changedTouches == undefined
    //       ? this.moveStart
    //       : e.originalEvent.changedTouches[0];
      var moveEnd_X =
        e.pageX - this.moveStart // || this.moveStart - this.moveStart; //松开鼠标后滑块移动的距离
      var ver_Num = this.X - 10;
      var deviation = 4; //偏差值
      var Min_left = ver_Num - deviation; //验证值最小值
      var Max_left = ver_Num + deviation; //验证值最大值
      if (this.moveStart == "") {
          console.log('未拖动滑块');
      } else {
        if (Max_left > moveEnd_X && moveEnd_X > Min_left) {
          //成功执行

          document.querySelector(".puzzle-lost-box").style.display = "none";
          document.querySelector("#puzzleBox").style.display = "none";

          // TODO:
          document.querySelector(".ver-tips").style.bottom = "0";

          // TODO: 重新刷新
          // setTimeout(function () {
          //     // $(".ver-tips").removeClass("slider-tips");
          //     // imgVer(Config);
          // },2000);

          // TODO: 成功之后的 事件
        } else {
          //失败执行
          // TODO:
          document.querySelector(".ver-tips").style.bottom = "0";
          // TODO: 重新刷新
          //   setTimeout(function () {
          //     $(".ver-tips").removeClass("slider-tips");
          //   }, 2000);
          //   TODO: 失败之后的事件
        }
      }
    //   setTimeout(function () {
    //     $(".slider-btn").css({
    //       left: "0",
    //       transition: "left 0.5s",
    //     });
    //     $("#puzzleLost").css({
    //       left: "0",
    //       transition: "left 0.5s",
    //     });
    //     $("#puzzleShadow").css({
    //       left: "0",
    //       transition: "left 0.5s",
    //     });
    //   }, 1000);
    //   $(".slider-btn").css({
    //     "background-position": "0 -84px",
    //   });
      this.moveStart = 0; //  清空上一次鼠标按下时的坐标X轴值;
    },
    // 初始化 位置
    initStyle() {
      // 初始化 拼图样式位置
      document.querySelector(".ver-box-imgs").style.width = this.w + "px";
      document.querySelector(".puzzle-lost-box").style.width = this.w + "px";
      document.querySelector(".puzzle-lost-box").style.height = this.h + "px";
      document.querySelector(".ver-box-imgs-bg").style.width = this.w + "px";
      document.querySelector(".ver-box-imgs-bg").style.height = this.h + "px";
      document.querySelector(".ver-box-imgs-bg img").style.width =
        this.w + "px";
      document.querySelector(".ver-box-imgs-bg img").style.height =
        this.h + "px";
      document.querySelector(".puzzle-lost-box").style.width = this.w + "px";
      document.querySelector(".puzzle-lost-box").style.height = this.h + "px";
      document.querySelector(".slider-box").style.width = this.w + "px";

      // 设置 凸显拼图的位置
      this.$refs.puzzleBox.style.left = this.left_Num + "px";
    },
    //生成随机数的公共函数
    RandomNum(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      if (Math.round(Rand * Range) == 0) {
        return Min + 1;
      } else if (Math.round(Rand * Max) == Max) {
        // index++;
        return Max - 1;
      } else {
        var num = Min + Math.round(Rand * Range) - 1;
        return num;
      }
    },
    drowImgVer() {
      const X = this.X;
      const Y = this.Y;
      const imgSrc = this.verimg;
      const w = this.w;
      const h = this.h;

      // 随机生成缺失拼图
      //使用canvas画出缺失拼图
      var d = this.PL_Size / 3;
      var c = document.getElementById("puzzleBox");
      var ctx = c.getContext("2d");

      ctx.globalCompositeOperation = "xor";
      ctx.shadowBlur = 10;
      ctx.shadowColor = "#fff";
      ctx.shadowOffsetX = 3;
      ctx.shadowOffsetY = 3;
      ctx.fillStyle = "rgba(0,0,0,0.7)";

      ctx.beginPath();
      ctx.lineWidth = "1";
      ctx.strokeStyle = "rgba(0,0,0,0)";
      ctx.moveTo(X, Y);
      ctx.lineTo(X + d, Y);
      ctx.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
      ctx.lineTo(X + 3 * d, Y);
      ctx.lineTo(X + 3 * d, Y + d);
      ctx.bezierCurveTo(
        X + 2 * d,
        Y + d,
        X + 2 * d,
        Y + 2 * d,
        X + 3 * d,
        Y + 2 * d
      );
      ctx.lineTo(X + 3 * d, Y + 3 * d);
      ctx.lineTo(X, Y + 3 * d);
      ctx.closePath();
      ctx.stroke();
      ctx.fill();

      //生成缺失 的 拼图并且凸显
      var c_l = document.getElementById("puzzleLost");
      var c_s = document.getElementById("puzzleShadow");
      var ctx_l = c_l.getContext("2d");
      var ctx_s = c_s.getContext("2d");
      var img = new Image();
      img.src = imgSrc;
      img.onload = function () {
        ctx_l.drawImage(img, 0, 0, w, h);
      };

      ctx_l.beginPath();
      // ctx_l.lineWidth = "5";
      // ctx_l.strokeStyle = "#ecf093";
      ctx_l.strokeStyle = "rgba(0,0,0,0)";
      ctx_l.moveTo(X, Y);
      ctx_l.lineTo(X + d, Y);
      ctx_l.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
      ctx_l.lineTo(X + 3 * d, Y);
      ctx_l.lineTo(X + 3 * d, Y + d);
      ctx_l.bezierCurveTo(
        X + 2 * d,
        Y + d,
        X + 2 * d,
        Y + 2 * d,
        X + 3 * d,
        Y + 2 * d
      );
      ctx_l.lineTo(X + 3 * d, Y + 3 * d);
      ctx_l.lineTo(X, Y + 3 * d);
      ctx_l.closePath();
      ctx_l.stroke();
      // ctx_l.shadowBlur = 10;
      // ctx_l.shadowColor = "black";
      ctx_s.fill();
      ctx_l.clip();

      ctx_s.beginPath();
      ctx_s.lineWidth = "1";
      ctx_s.strokeStyle = "rgba(0,0,0,0)";
      ctx_s.moveTo(X, Y);
      ctx_s.lineTo(X + d, Y);
      ctx_s.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
      ctx_s.lineTo(X + 3 * d, Y);
      ctx_s.lineTo(X + 3 * d, Y + d);
      ctx_s.bezierCurveTo(
        X + 2 * d,
        Y + d,
        X + 2 * d,
        Y + 2 * d,
        X + 3 * d,
        Y + 2 * d
      );
      ctx_s.lineTo(X + 3 * d, Y + 3 * d);
      ctx_s.lineTo(X, Y + 3 * d);
      ctx_s.closePath();
      ctx_s.stroke();
      ctx_s.shadowBlur = 20;
      ctx_s.shadowColor = "black";
      ctx_s.fill();
    },
  },
};
</script>

<style lang="scss" scoped>
.ver-box {
  position: relative;
  padding: 16px 16px 28px;
  border: 1px solid #ddd;
  background: #f2ece1;
  border-radius: 16px;
  .ver-box-imgs {
    position: relative;
    overflow: hidden;
    width: 260px;
    &-bg {
      position: relative;
      width: 260px;
      height: 116px;
      img {
        width: 260px;
        height: 116px;
      }
      canvas {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 22;
      }
    }
    .puzzle-lost-box {
      position: absolute;
      width: 260px;
      height: 116px;
      top: 0;
      //   TODO: 随机 左侧距离
      left: 0px;
      z-index: 111;

      #puzzleShadow {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 22;
      }
      #puzzleLost {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 33;
      }
    }
  }
}
.slider-box {
  position: relative;
  width: 260px;
  margin: auto;
  &-c {
    border: 1px solid #c3c3c3;
    border-radius: 24px;
    background: #ece4dd;
    box-shadow: 0 1px 1px rgba(12, 10, 10, 0.2) inset;
    &-t {
      font-size: 12px;
      color: #486c80;
      line-height: 28px;
      margin: 0;
      text-align: right;
      padding-right: 22px;
    }
  }
  .slider-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    left: 0;
    top: -7px;
    z-index: 12;
    cursor: pointer;
    background-image: url("../../../assets/verify/sprite.3.2.0.png");
    background-position: 0 -84px;
    transition: inherit;
  }
}

.ver-tips i {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: top;
  background-image: url("../../../assets/verify/sprite.3.2.0.png");
  background-position: -4px -1229px;
}
.ver-tips span {
  display: inline-block;
  vertical-align: top;
  line-height: 22px;
  color: #455;
}
.active-tips {
  display: block;
}

.hidden {
  display: none;
}
.re-btn {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 28px;
  padding: 0 16px;
}
.re-btn a {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 7px 0;
  background-image: url("../../../assets/verify/sprite.3.2.0.png");
  background-position: 0 -1179px;
  cursor: pointer;
}
.re-btn a:hover {
  background-position: 0 -1193px;
}
</style>